<template>
    <div class="tab-bar-item" :style="getActivecolor" @click="click">
      <slot name="icon"></slot>
      <slot name="text"></slot>
    </div>
</template>

<script>
    import TabBar from "./TabBar";
    export default {
        name: "TabBarItem",
        props:{
          path:String,
          activecolor:{
            type:String,
            default:'pink'
          }
        },
        components:{
          TabBar
        },
        methods:{
          click(){
           this.$router.push(this.path)
          }
        },
        computed:{
          isActive(){
            return this.$route.path.indexOf(this.path) != -1
          },
          getActivecolor(){
            return this.isActive?{color:this.activecolor}:{}
          }
        }
    }
</script>

<style scoped>
.tab-bar-item{
  flex: 1;
  height: 49px;
  text-align: center;
  font-size: 14px;
  margin-top: 3px;
}
</style>
